import deepClone from '@/libs/deepClone'
import {computed, defineComponent, PropType, reactive, watch} from 'vue'
import {CnNormalSpan} from '../text'

/**
 * 成功图标
 */
const IconSuccess = defineComponent({
  setup(props, ctx) {
    return () => (
      <i
        class='iconfont icon-success text-36'
        style={{
          color: '#8de1c0 !important'
        }}
      ></i>
    )
  }
})

/**
 * 数字图标
 * 圆形
 * 未被选中
 */
const IconNumber = defineComponent({
  props: {
    text: String,
    active: Boolean,
    status: {
      type: String as PropType<'wait' | 'process' | 'finish' | 'error' | 'success'>,
      default: 'wait'
    }
  },
  setup(props, {slots}) {
    return () =>
      props.status === 'success' ? (
        <IconSuccess></IconSuccess>
      ) : props.status === 'process' ? (
        <CnNormalSpan
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '40px',
            height: '40px',
            fontSize: '18px',
            background: 'linear-gradient(#5999ff 0%,#307cff 100%)',
            borderRadius: '9999px',
            border: '3px solid #fff',
            color: '#fff',
            boxShadow: `0 0 6px 2px rgba(89,153,255,0.12)`,
            position: 'absolute'
          }}
        >
          {slots.default ? slots.default() : props.text || ''}
        </CnNormalSpan>
      ) : props.status === 'wait' ? (
        <CnNormalSpan
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '40px',
            height: '40px',
            fontSize: '18px',
            background: '#f3f4f5',
            borderRadius: '9999px',
            border: '3px solid #fff',
            position: 'absolute'
          }}
        >
          {slots.default ? slots.default() : props.text || ''}
        </CnNormalSpan>
      ) : null
  }
})

const CStepIcon = defineComponent({
  setup(props, ctx) {
    return () => {}
  }
})

const CStepDesc = defineComponent({
  setup(props, ctx) {
    return () => {}
  }
})

const CStepTitle = defineComponent({
  setup(props, ctx) {
    return () => {}
  }
})

const CStep = defineComponent({
  props: {
    active: {
      type: Number,
      required: true
    },
    targetActive: {
      type: Number,
      required: true
    },
    data: {
      type: Object as PropType<MyPm.PmProgress[]>,
      required: true
    },
    now: {
      type: Object as PropType<MyPm.PmProgress[]>,
      required: true
    }
  },
  setup(props, ctx) {
    /**
     * @desc 去重当前流程的步骤标识
     *
     * @desc 因为在目标确认、互评、自评、上级评分时，会有多个处理人，他们流程步骤相同，只是排序不同
     *
     * @desc 当前流程会存在多个
     *  */
    // const progressStep = computed(
    //   () => Array.from(new Set(props.data.map(item => item.pmProgressStep)))[0]
    // )

    // const moreUserSet = computed(() => {
    //   const allMoreUserSet = Array.from(new Set(props.data.map(item => item.moreUserSet || 0)))
    //   if (allMoreUserSet.length === 1) {
    //     return allMoreUserSet[0]
    //   } else {
    //     // 评分方式不统一时 返回false
    //     return false
    //   }
    // })

    const title = computed(() => {
      const progressTitle = Array.from(new Set(props.data.map(item => item.pmProgressName))).join(
        '、'
      )

      if (props.data.length > 1) {
        switch (props.now[0].moreUserSet) {
          case 1:
            return progressTitle + '(依次评分)'
          case 2:
            return progressTitle + '(各自评分)'
          case 3:
            return progressTitle + '(任一评分)'
          case 0:
          default:
            return progressTitle
        }
      } else {
        return progressTitle
      }
    })

    const makeUserName = computed(() => {
      const userName = Array.from(new Set(props.data.map(item => item.makeUserName))).join('、')
      return userName
    })

    return () => (
      <el-step
        v-slots={{
          icon: () => (
            <IconNumber
              status={
                props.active < props.targetActive
                  ? 'wait'
                  : props.active === props.targetActive
                  ? 'process'
                  : 'success'
              }
            >
              {props.targetActive + 1}
            </IconNumber>
          ),
          title: () => <CnNormalSpan class='text-12'>{title.value}</CnNormalSpan>,
          description: () => (
            <CnNormalSpan
              class='text-12 '
              style={{
                whiteSpace: 'break-spaces'
              }}
            >
              {makeUserName.value}
            </CnNormalSpan>
          )
        }}
      />
    )
  }
})

const ProcessSteps = defineComponent({
  props: {
    data: {
      type: Array as PropType<MyPm.PmProgress[]>,
      default: []
    },
    now: {
      type: Array as PropType<MyPm.PmProgress[]>,
      default: []
    }
  },
  setup(props, ctx) {
    let state = reactive<{active: number; stepDatas: MyPm.PmProgress[][]}>({
      active: 0,
      stepDatas: []
    })

    watch(
      () => props.data,
      n => {
        let stepDatas = []
        const propsData = deepClone(n) as MyPm.PmProgress[]
        for (let i = 0; i < propsData.length; i++) {
          const progress = propsData[i]
          const nextProgress = propsData[i + 1]
          if (nextProgress && nextProgress.pmProgressStep === progress.pmProgressStep) {
            continue
          }
          stepDatas.push(propsData.filter(item => item.pmProgressStep === progress.pmProgressStep))
        }
        state.stepDatas = stepDatas

        const active = stepDatas.findIndex(item =>
          item.find(item1 => item1.pmProgressCompleteStatus === 1)
        )

        state.active = active === undefined || active < 0 ? stepDatas.length : active
      },
      {immediate: true}
    )

    return () => (
      <el-steps align-center class='justify-center el-steps-dashed my-16' active={state.active}>
        {state.stepDatas.map((item, idx) => (
          <CStep active={state.active} targetActive={idx} data={item} now={props.now}></CStep>
        ))}
      </el-steps>
    )
  }
})

export default ProcessSteps
